<template>
  <div class="page">
    <div id="map" class="map" :style="mapStyle"></div>
  </div>
</template>

<script>
export default {
  props: {
    // 地图在该视图上的高度
    mapHeight: {
      type: Number,
      default: 700,
    },
    // 经度
    longitude: {
      type: Number,
      default: 116.404,
    },
    // 纬度
    latitude: {
      type: Number,
      default: 39.915,
    },
    description: {
      type: String,
      default: "天安门",
    },
  },

  data() {
    return {
      mapStyle: {
        width: "100%",
        height: this.mapHeight + "px",
      },
    };
  },

  mounted() {
    this.ready();
  },

  methods: {
    ready() {
      var map = new BMap.Map("map");
      var point = new BMap.Point(116.404, 39.915);
      var marker = new BMap.Marker(point);
      map.addOverlay(marker);
      map.centerAndZoom(point, 15);
      map.enableScrollWheelZoom(true);
      var opts = {
        width: 250,
        height: 75,
        title: "地址：",
      };
      var infoWindow = new BMap.InfoWindow("World", opts);
      marker.addEventListener("click", function () {
        map.openInfoWindow(infoWindow, point);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.map {
  height: 100vh;
}
</style>
